<template>
    <div class="spaceList animated fadeInUp">
        <titles>
            <template v-slot:project_ri>
                <li class="project_right">
                    <button @click="gorelease">
                        <img src="@/assets/home/pen-icon.png" alt="">
                        发布内容
                    </button>
                </li>
            </template>
        </titles>
        <div class="list_box">
            <div class="list_box_item" v-for="(item, index) in dataList.list">
                <card :type="1" :itemData="item"></card>
            </div>
            
        </div>
        <div class="paging">
            <el-pagination :pager-count="5" background layout="prev, pager, next" :total="dataList.total" :current-page="dataList.page"
                @current-change="changesize" />
        </div>
    </div>
</template>

<script setup>
import axios from "axios";
import { reactive ,onBeforeMount} from 'vue'
import titles from './title.vue'
import card from './card.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const dataList = reactive({
    page: 1,
    tabid: 0,
    list:[],
    total:0
})
onBeforeMount(()=> {
    getArtlcle()
})
const changesize = (value) => {
    dataList.page = value
}
const gorelease = () => {
	if(localStorage.getItem('userType') == 1 || localStorage.getItem('userType') == 2){
		router.push('/release')
	}else{
		ElMessage.error('只有教师和学生用户可以发布！敬请谅解！')
		return
	}
    
}

const getArtlcle = ()=> {
    axios({
			url:'/Article/index',
			baseURL:'http://kaoshiguanli.haimijiaoyu.com/api/',
			method:'get'
		}).then(res=> {
			dataList.list = res.data.list
            dataList.total = res.data.count
		})
}
</script>

<style lang="scss" scoped>
@media screen and (min-width:1200px) {
    .project_right {
        button {
            padding: 5px 15px;
            font-size: 16px;
            color: #FFFFFF;
            background-color: #FF9933;
            border-radius: 25px;
            border: none;
            display: flex;
            align-items: center;

            img {
                width: 21px;
                height: 21px;
                margin-right: 10px;
            }
        }
    }

    .list_box {
        width: 1000px;
        min-height: 600px;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        padding-bottom: 40px;
    }
    .list_box_item{
        transition: all 0.3s;
    }
    .list_box_item:hover{
		-webkit-transform: translate(-10px,-10px);
                transform: translate(-10px,-10px);
	}

    .paging{
		width: 100%;
		margin-bottom: 50px;
		display: flex;
		justify-content: center;
		:deep(.is-active) {
			background-color: #FF9933 !important;
		}
	}
}

@media screen and (max-width: 1200px) {
    .spaceList {
        min-height: 61vh;
        padding-top: 4vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .project_right {
        button {
            padding: 0.5vw 2vw;
            font-size: 2.13vw;
            color: #FFFFFF;
            background-color: #FF9933;
            border-radius: 3.4vw;
            border: none;
            display: flex;
            align-items: center;

            img {
                width: 3vw;
                height: 3vw;
                margin-right: 1vw;
            }
        }
    }

    .paging{
		width: 95vw;
		margin-bottom: 6vw;
		display: flex;
		justify-content: center;
		:deep(.is-active) {
			background-color: #FF9933 !important;
		}
	}
}
</style>